/**
 * Created by Void on 2017/9/13.
 */

import {
    Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, ElementRef,
    SimpleChanges
} from '@angular/core';

@Component({
    selector:'super-tab-button',
    template:`
<span class="title" [ngClass]="_textColorArr"  ion-text>{{title}}
<ion-badge mode="ios" [color]="badgeColor">{{badge}}</ion-badge>
</span>
<div class="button-effect"></div>
`,
    host: {
        '[class.selected]':'selected',
        '(click)':'onClick()',
        'tappable':'',
        'role':'button',
        'color':'color'
    },
    changeDetection:ChangeDetectionStrategy.OnPush,
    encapsulation:ViewEncapsulation.None
})

export class SuperTabButton{
    @Input() selected:boolean;
    @Input() title:string;
    @Input() badge:number;
    @Input() badgeColor:string;
    @Input() color:string;

    @Output() select:EventEmitter<SuperTabButton> = new EventEmitter<SuperTabButton>();

    private _textColorArr:string[];

    constructor(
        private _el:ElementRef
    ){
    }

    ngOnChanges(changes: SimpleChanges) {
      this._textColorArr = this.selected ? ['text-ios-'+this.color] : [];
    }

    onClick(){
        this.select.emit(this);
    }
    getNativeElement(): HTMLElement {
        return this._el.nativeElement;
    }
}